<?php

/* 
 *employe/change-site.phtml
 */
use RHX\Helper\RHDateTime;
?>
<div class="change-container">
    <div class='change-sites content-body'>
	<div class='change-label'>Sélectionner le Site de destination</div
	<div class='change-destination'>
	    <?php foreach($arrivees as $s): ?>
	    <?php if ($s->libelle == '') {continue;} ?>
	    <div class='change-site'><a href='#' data-id='<?php echo $s->id; ?>'><?php echo $s->libelle; ?></a></div>
	    <?php endforeach; ?>
	</div>
    </div>
    <div class="change-label" style='text-align: left;'>
	Sélectionner la date du transfert : <a href='#' id='change-date' data-type='select' style="color: red;"><?php echo $firstDay->dateFr(); ?></a>
	</div>
    <div class="change-validation">
	<div class='change-label' style="position: relative;">Transfert de l'employé <a href="#" class='change-info'><?php echo $employe->prenom .' ' .$employe->nom1; ?></a> de <a href='#' class='change-info' title='Site de départ'><?php echo $depart->libelle ?></a><br>vers le site <a href='#' id='arrivee' class="change-info">...</a>
	    <button class="btn btn-success" id='change-validate' style='position: absolute; right: 5px; bottom: 5px;'><span id="btn-chg-loader"><img src="<?php echo $this->basePath() ?>/img/rhx/ajax-waiting.gif" ></span><span id="btn-chg-title"><i class="icon icon-white icon-ok"></i> &nbsp;Valider</span></button>
	</div>
	<span class='info' id='message' style='display: inline-block; float: left; color: red; font-style: italic;'></span>
    </div>
</div>

<form id='change-form'>
    <input type='hidden' id='form-matricule' name='matricule' value='<?php echo $employe->matricule; ?>'>
    <input type='hidden' id='form-depart' name='depart' value='<?php echo $depart->id ?>'>
    <input type='hidden' id='form-arrivee' name='arrivee' value='-1'>
    <input type='hidden' id='form-date' name='date' value='<?php echo $firstDay->date(); ?>'>
</form>

<script type='text/javascript'>
    $(function(){
	$('.change-info').click(function(e){
	    e.preventDefault();
	});
	$('.change-site a').click(function(e){
	    e.preventDefault();
	    id = $(this).attr('data-id');
	    $('#form-arrivee').val(id);
	    $('.selected').removeClass('selected');
	    $(this).parent().addClass('selected');
	    $('#arrivee').text($(this).text());
	});
	$('#change-validate').click(function(e){
	    e.preventDefault();
	    arrivee = parseInt($('#form-arrivee').val());
	    if(arrivee < 0){
		$('#message').text("Veuillez selectionner un site");
	    }else{
		$ajax = $.ajax({
		    type: 'post',
		    url : '<?php echo $this->url('RHX/default', array('controller' => 'employe', 'action' => 'applyChangeSite')) ?>',
		    data: $('#change-form').serialize()
		});
		$ajax.done(function(result){
		    if(result.done){
			$('#info-close').click();
			window.history.back();
		    }else{
			$('#message').text(result.error);
		    }
		});
	    }
	});
	/*$('#change-date').editable({
	    title: 'Date de changement',
	    format: 'DD/MM/YYYY',
	    template: 'D / MMMM / YYYY',
	    placement: 'right',
	    validate: function(value) {
		var val = value.year() + '-' + (parseInt(value.month()) + 1) + '-' + value.date();
		$('#form-date').val(val);
	    },
	    params: function(params) {
		value = params.value;
		date = moment(value, ['YYYY-MM-DD', 'DD/MM/YYYY']);
		params.value = date.format('YYYY-MM-DD');
		return params;
	    },
	    combodate: {
		minYear: <?php echo (int)date('Y') - 5; ?>,
		maxYear: <?php echo (int)date('Y') + 5; ?>,
		minuteStep: 1
	    }
	});*/
	$('#change-date').editable({
	    title: 'Date de changement',
	    source: '<?php echo $this->url('RHX/default', array('controller' => 'site', 'action' => 'dateTransfert')) ?>',
	    validate: function(value){
		$('#form-date').val(value);
	    },
	    inputclass: 'x-large'
	});
    });
</script>

<style type='text/css'>
    .change-date{
	width: 99%;
	margin: auto;
    }
    .change-sites{
	width: 99%;
	/*margin: 10px auto;*/
    }
    .change-label{
	text-align: left;
	margin: 3px auto;
	width: 99%;
	background: #a4becc;
	border: solid 1px #7c8f99;
    }
    .change-info{
	font-weight: bold;
	color: #0006bd;
    }
    .change-site{
	display: inline-table;
	width: 29%;
	margin: 0.3%;
	padding: 5px;
	border: solid 1px #00a0f8;
	background: #fff;
    }
    .change-site:hover, .selected{
	box-shadow: 0px 0px 3px 5px #ff5a00;
	color: #920000;
    }
    .change-site a{
	display: inline-block;
	width: 99%;
	margin: auto;
    }
    .modal-body{
	max-height: none;
    }
    .modal-footer{
	visibility: hidden;
    }
</style>
